<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  
</body>
<script>

  class Model{
    data1(){
      return "hello";
    }
    data2(){
      return "world";
    }
    data3(){
      return "hahahaha";
    }
  }

  class View{
    view1(d){
      // 5. 由视图完成最终数据的呈现
      console.log(d);
    }
    view2(d){
      alert(d);
    }
    view3(d){
      document.write(d);
    }
  }

  class Control{
    constructor(){
      this.m = new Model();
      this.v = new View();
    }
    ctrl1(){
      // 3. 在指令中，从指定模型中获取数据
      const d = this.m.data2();
      // 4. 在指令中，获取视图，并将数据传给视图
      this.v.view1(d);
    }
    ctrl2(){
      const d = this.m.data3();
      this.v.view2(d);
    }
    ctrl3(){
      const d = this.m.data1();
      this.v.view1(d);
    }
    ctrl4(){
      const d = this.m.data3();
      this.v.view3(d);
    }
  }

  // 1. 得到控制器
  const c = new Control();

  // 2. 发出指令
  c.ctrl1();
  c.ctrl2();
  c.ctrl3();

  c.ctrl4();

  
</script>
</html>